<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
  <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>MarkerCluster</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <style type="text/css">
        #map_canvas {
            width: 100%;
            height: 100%;
        }

        #panel {
            position: relative;
            width: 300px;
            height: 500px;
            overflow: auto;
            border: 1px solid #000000;
        }

        #attributeList li {
            border-bottom: 1px dashed #999999;
            padding: 5px 5px;
            line-height: 20px;
        }
    </style>
</head>
<body onload="window.init()">
<div id="map_canvas"></div>
<script type="text/javascript">
var markerIndex = 0;
var map;

function $(a) {
    return document.getElementById(a);
}
 var data = [
            [39.959228, 116.367874],
            [39.984486, 116.427612],
            [39.988169, 116.279984],
            [39.847558, 116.402893],
            [39.941857, 116.383667],
            [40.022882, 116.551208],
            [39.819085, 116.581421],
            [39.924482, 116.205826],
            [39.757880, 116.162567],
            [39.631606, 116.325989],
            [39.797986, 116.415253],
            [40.117990, 116.416626],
            [40.271668, 116.638412],
            [40.143190, 116.236038],
            [39.928168, 116.515503],
            [39.902362, 116.389160],
            [39.935539, 116.377487]
        ];
window.init = function() {
    var Map = qq.maps.Map;
    var Marker = qq.maps.Marker;
    var LatLng = qq.maps.LatLng;
    var Event = qq.maps.event;

    var MarkerImage = qq.maps.MarkerImage;
    var MarkerShape = qq.maps.MarkerShape;
    var MarkerAnimation = qq.maps.MarkerAnimation;
    var Point = qq.maps.Point;
    var Size = qq.maps.Size;
    var ALIGN = qq.maps.ALIGN;

    var MVCArray = qq.maps.MVCArray;
    var MarkerCluster = qq.maps.MarkerCluster;
    var Cluster = qq.maps.Cluster;
    var MarkerDecoration = qq.maps.MarkerDecoration;

    var forEach = function (array, fun) {
        for (var i = 0, l = array.length; i < l; ++i) {
            if (fun(array[i], i) === false) {
                return false;
            }
        }
    };

    var latlng = new LatLng(39.91, 116.38);
    var options = {
        'zoom':5,
        'center':latlng,
        'mapTypeId':"roadmap",
        'disableDefaultUI': true    //禁止所有控件
    };

    var map = new Map($('map_canvas'), options);

    var markers = new MVCArray();

    function createCluster() {
        for (var i = 0; i < data.length; i++) {
            var latLng = new LatLng(data[i][0], data[i][1]);
            var marker = new Marker({
                'position':latLng,
                map:map
            });
            markers.push(marker);
        }
    };
    createCluster();
};

</script>
</body>
</html>
